<template>
  <div class='contain'>
    <div id="mycard">
      1
    </div>
    <div>
      2
    </div>
  </div>
</template>
<script>
  import helper from '../../service/helper.js';
  import parameter from '../../service/state.js';
  export default {
    data() {
      return {
        enemyList:[],
        myList:[],
      };
    },
    components: {

    },
    methods: {
   loadCards() {
      if (!JSON.parse(localStorage.getItem("cards"))) {
        alert("未加载数据");
        this.$router.push({
          path: "excel",
        });
        return;
      }
      // this.itemData = JSON.parse(localStorage.getItem("cards"))[this.cardNo];
      // this.maxNum = JSON.parse(localStorage.getItem("cards")).length;
    },
     jump(url, data) {
      if (url && (url == "-1")) {
        this.$router.back(-1);
      } else {
        this.$router.push({ path: url, query: data });
      }
     },
     draw(){
      var c = document.getElementById("mycard");
      if (!c.getContext) return;
      var ctx = c.getContext("2d");
      var mountCard = this.myList;
      ctx.save();
      //矩形
      ctx.fillStyle = "#36D";
      // 头部
      ctx.fillRect(20, 10, 270, 40);
      ctx.strokeRect(20, 10, 270, 40)
      // 画面
      ctx.fillRect(10, 60, 280, 100);
      ctx.strokeRect(10, 60, 280, 100);
      // 标签条
      ctx.fillRect(20, 170, 270, 40);
      ctx.strokeRect(20, 170, 270, 40);
      // 文本域
      ctx.fillRect(10, 220, 280, 170);
      ctx.strokeRect(10, 220, 280, 170);
      ctx.fillStyle = "#fff";
      //右上
      ctx.fillRect(250, 10, 40, 40);
      ctx.strokeRect(250, 10, 40, 40);
      // 右中
      ctx.fillRect(210, 170, 80, 40);
      ctx.strokeRect(210, 170, 80, 40)
      // 底部文字框
      //特性
      ctx.fillRect(20, 230, 40, 40);
      ctx.strokeRect(20, 230, 40, 40);
      ctx.fillRect(70, 230, 210, 40);
      ctx.strokeRect(70, 230, 210, 40);
      //攻击
      ctx.fillRect(20, 280, 40, 40);
      ctx.strokeRect(20, 280, 40, 40);
      ctx.fillRect(110, 280, 170, 40);
      ctx.strokeRect(110, 280, 170, 40);
      //出手
      ctx.fillRect(70, 280, 40, 40);
      ctx.strokeRect(70, 280, 40, 40);
      //辅助
      ctx.fillRect(20, 330, 40, 40);
      ctx.strokeRect(20, 330, 40, 40);
      ctx.fillRect(70, 330, 210, 40);
      ctx.strokeRect(70, 330, 210, 40);
      //圆形
      //hp
      ctx.beginPath();
      ctx.fillStyle = "red";
      ctx.lineWidth=5;
      ctx.arc(30, 30, 25, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.fill();
      ctx.closePath();
      //ele
      ctx.beginPath();
      ctx.fillStyle = "#fff";
      ctx.lineWidth=5;
      ctx.arc(30, 190, 25, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.fill();
      ctx.closePath();
      // 文字
      ctx.restore()
      ctx.font = "20px Arial";
      ctx.textAlign = "center";
      ctx.fillText(mountCard.name, 150, 35, [100]);
      ctx.save()
      ctx.font = "30px Arial";
      ctx.fillText(mountCard.hp, 30, 40, [100]);
      ctx.fillText(mountCard.exp, 270, 40, [100]);
      ctx.fillText(mountCard.eleText, 30, 200, [100]);
      ctx.fillText(mountCard.No, 250, 200, [100]);
      ctx.restore()
      ctx.textAlign = "start";
      ctx.fillText(helper.getTags(mountCard.tag1Text,mountCard.tag2Text,mountCard.tag3Text),60, 197, [250]);
      ctx.font = "16px Arial";
      ctx.fillText("特性",25, 255, [100]);
      ctx.fillText("攻击",25, 305, [100]);
      ctx.fillText("辅助",25, 355, [100]);
      ctx.fillText(mountCard.abilityText,80, 255, [250]);
      ctx.textAlign = "center";
      ctx.fillText(mountCard.spd,90, 305, [250]);
      ctx.textAlign = "start";
      ctx.fillText(mountCard.ackText,120, 305, [250]);
      ctx.fillText(mountCard.supText,80, 355, [250]);

      // 图片
      var img = new Image(); // 创建一个<img>元素
      img.onload = function () {
        ctx.drawImage(img, 0,0,600,200, 20, 70, 260, 80);
        // setTimeout(() => {
        //   ctx.translate(150,200);
        //   ctx.rotate(0.125*Math.PI);
        //   ctx.translate(-150, -200);
        // }, 100);
      };
      // img.src = require('../assets/images/pic/001.jpeg'); // 设置图片源地址
      img.src = require("../../assets/images/pic/" + mountCard.img); // 设置图片源地址
     }
    },
    watch: {

    },
    mounted() {
    this.loadCards();
    },
};
</script>
<style scoped>

</style>